</div>

<!-- Responsive Tabs https://github.com/jellekralt/Responsive-Tabs -->
<script type="text/javascript" src="/DesktopModules/NBright/NBrightBuy/Themes/Cygnus/js/jquery.responsiveTabs.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#DetailTabs').responsiveTabs({
            active: 1,
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            animation: 'slide', // Animation options - fade, slide or do not use
            rotate: false,
            setHash: true,
			activate: function(){$('#relatedwrapper').masonry();}
        });
    });
</script>

<!-- Lightbox http://osvaldas.info/image-lightbox-responsive-touch-friendly -->
<script type="text/javascript" src="/DesktopModules/NBright/NBrightBuy/Themes/Cygnus/js/imagelightbox.nbb.js"></script>
<script type="text/javascript">
$(document).ready(function() {

//Integrate custom lightBox for NBS
$(function() {
    var activityIndicatorOn = function() {
        $('<div id="imagelightbox-loading"><div></div></div>').appendTo('body');
    },
			activityIndicatorOff = function() {
			    $('#imagelightbox-loading').remove();
			},

			overlayOn = function() {
			    $('<div id="imagelightbox-overlay"></div>').appendTo('body');
			},
			overlayOff = function() {
			    $('#imagelightbox-overlay').remove();
			},

			closeButtonOn = function(instance) {
			    $('<a href="#" id="imagelightbox-close">Close</a>').appendTo('body').on('click', function() { $(this).remove(); instance.quitImageLightbox(); return false; });
			},
			closeButtonOff = function() {
			    $('#imagelightbox-close').remove();
			},

			captionOn = function() {
			    var description = $('a[[href="' + $('#imagelightbox').attr('src') + '"]] img').attr('alt');
			    if (description.length > 0)
			        $('<div id="imagelightbox-caption">' + description + '</div>').appendTo('body');
			},
			captionOff = function() {
			    $('#imagelightbox-caption').remove();
			},

			navigationOn = function(instance, selector) {
			    var images = $(selector);
			    if (images.length) {
			        var nav = $('<div id="imagelightbox-nav"></div>');
			        for (var i = 0; i < images.length; i++)
			            nav.append('<a href="#"></a>');

			        nav.appendTo('body');
			        nav.on('click touchend', function() { return false; });

			        var navItems = nav.find('a');
			        navItems.on('click touchend', function() {
			            var $this = $(this);
			            if (images.eq($this.index()).attr('href') != $('#imagelightbox').attr('src'))
			                instance.switchImageLightbox($this.index());

			            navItems.removeClass('active');
			            navItems.eq($this.index()).addClass('active');

			            return false;
			        })
					.on('touchend', function() { return false; });
			    }
			},
			navigationUpdate = function(selector) {
			    var items = $('#imagelightbox-nav a');
			    items.removeClass('active');
			    items.eq($(selector).filter('[href="' + $('#imagelightbox').attr('src') + '"]').index(selector)).addClass('active');
			},
			navigationOff = function() {
			    $('#imagelightbox-nav').remove();
			};
			
					//	Custom configuration for NBrightBuy
		var instanceNBB = $('a[[data-imagelightbox="nbb"]]').imageLightbox(
		{
			animationSpeed: [Settings:lightboxspeed],
		    onStart: function() { overlayOn(); closeButtonOn(instanceNBB); },
		    onEnd: function() { overlayOff(); captionOff(); closeButtonOff(); activityIndicatorOff(); },
		    onLoadStart: function() { captionOff(); activityIndicatorOff(); },
		    onLoadEnd: function() { captionOn(); activityIndicatorOff(); }
		});
});
});

</script>

<!-- Masonry Grid http://masonry.desandro.com -->
<script type="text/javascript">
$( document ).ready(function() {

var $container = $('#relatedwrapper').masonry({
  columnWidth: [Settings:relateditemwidth], // List item width - Can also use CSS width of first list item
  itemSelector: '.relateditem',
  gutter: [Settings:relateditemgutter], // Set horizontal gap and include in calculations. Also used in CSS for vertical gap
  isOriginLeft: true, // Build from right to left if false
  isOriginTop: true, // Build from bottom to top if false
});

// initialize Masonry after all images have loaded - Webkit needs this when image containers don't have a fixed height
$container.imagesLoaded( function() {
  $container.masonry();
});

});
</script>
